import React, { Component, PropTypes } from 'react';
import {
  WebView,
  StyleSheet,
  View,
  Platform,
  TouchableOpacity,
  Text,
  PixelRatio
} from 'react-native';
import {Actions} from "react-native-router-flux";
import ICON2 from 'react-native-vector-icons/Ionicons'
import {Toast, Overlay} from 'teaset'
import * as ShareMenu from './../common/ShareMenu'
import { SafeAreaView } from 'react-navigation';
import {getUserId} from "../../services/token";


export default class WebBrowser extends Component{
  constructor(props){
    super(props)
  }

  render(){
    const { url, title } = this.props
    let shareUrl;
    if(getUserId()){
      shareUrl = 'https://tao.vyxjj.com/index/user/help?shareid='+getUserId()
    }else{
      shareUrl = 'https://tao.vyxjj.com/index/user/help'
    }

    const patchPostMessageFunction = function() {
      let originalPostMessage = window.postMessage;

      let patchedPostMessage = function(message, targetOrigin, transfer) {
        originalPostMessage(message, targetOrigin, transfer);
      };

      patchedPostMessage.toString = function() {
        return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
      };

      window.postMessage = patchedPostMessage;
    };

    const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();';

    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <TouchableOpacity
            style={styles.headerBtn}
            onPress={() => { Actions.pop() }}
          >
            <ICON2 name='ios-arrow-back' color='#000' size={24}/>
          </TouchableOpacity>
          <View style={styles.headerTitle}>
            <Text style={styles.headerTitleText}>{title ? title: ''}</Text>
          </View>
          <TouchableOpacity
            style={styles.headerBtn}
            onPress={() => {
              if(title === '活动详情'){
                Overlay.show(ShareMenu.ShareMenu({
                  'cate': 'help',
                  'title': '发现极品-活动详情',
                  'description': '领优惠券上发现极品，海量宝贝等你来挑',
                  'thumbImage': 'http://tao.vyxjj.com/common/img/logo.png',
                  'webpageUrl': url,
                }))
              }else{
                Overlay.show(ShareMenu.ShareMenu({
                  'cate': 'help',
                  'title': '发现极品-使用说明',
                  'description': '领优惠券+返利+推荐返佣，真心比双11还便宜！',
                  'thumbImage': 'http://tao.vyxjj.com/common/img/logo.png',
                  'webpageUrl': shareUrl,
                }))
              }

            }}
          >
            <ICON2 name='md-share' color='#000' size={22}/>
          </TouchableOpacity>
        </View>
        <WebView
          automaticallyAdjustContentInsets={false}
          source={{uri: url}}
          startInLoadingState={true}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          allowsInlineMediaPlayback={true}
          // onMessage={(event) => {
          //   if(event.nativeEvent.data == '成功'){
          //     Actions.pop({refresh:{refresh:true}, timeout:1})
          //   }
          // }}
          // injectedJavaScript={patchPostMessageJsCode}
        >
        </WebView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor:'#fff'
  },
  header: {
    height: 40,
    flexDirection: 'row',
    justifyContent: "space-between",
    alignItems: 'center',
    borderBottomWidth: 1,
    backgroundColor:'#fff',
    borderBottomColor:'#eaeaea',
    // marginTop: Platform.OS === 'android' ? 0 : 20,
  },
  headerTitle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerTitleText: {
    fontSize: 16,
    color: '#0A0A0A'
  },
  headerBtn: {
    paddingHorizontal: 8,
  },
  body:{
    flex: 1,
    paddingHorizontal: 10,
    backgroundColor: '#f8f8f8',
  }
})